import React,{useState} from 'react'
import './app.css'
import {NavLink,useNavigate} from 'react-router-dom'

export default function Header() {
  const[curIndex,setCurIndex]=useState(0)
  const tabs=[
    {
      path:'/hot',
      title:'热门新闻'
    },
    {
      path:'/sports',
      title:'体育新闻'
    },
    {
      path:'/domestic',
      title:'国内新闻'
    },
    {
      path:'/',
      title:'国际新闻'
    }
  ]
  //调用useNavigate()
  const nav=useNavigate()
  const go=(arg,index)=>{
    nav(arg)
    setCurIndex(index)
  }
  return (
    <div className='header'>
       {
         tabs.map((item,index)=><NavLink className="item" key={index} to={item.path}>
            <div>
              {item.title}
            </div>
         </NavLink>)
       }
       {/* {
         tabs.map((item,index)=><div className={curIndex===index?'selected':'item'} key={index} onClick={()=>go(item.path,index)}>
           {item.title}
         </div>)
       } */}
    </div>
  )
}
